<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <button onclick="doAjax()">$.ajax(...)</button>
    <button onclick="doAjaxGet()">$.get(...)</button>
    <button onclick="doAjaxGetJson()">$.getJson(...)</button>
    <button onclick="doAjaxPost()">$.post(...)</button>
    <button onclick="doAjaxPostJSON()">$.postJSON(...)</button>
    <button onclick="doAjaxLoad()">$."selecor".load(...)</button>

</div>
<div id="result"></div>
<script src="js/jquery.min.js"></script>

<script>
    function doAjaxLoad() {
        //1.url
        let url="http://localhost:8080/doGet";
        //2.send ajax get request
        //jquery 中load函数语法，load(url[,params][,callback])
        $("#result").load(url,function(){//资源加载完成以后执行
            console.log("load complete")
        });//异步加载url对应的资源，然后更新到result位置
    }



    function doAjaxPostJSON(){//向服务端直接提交json格式字符串
        //1.url
        let url="http://localhost:8080/doPostJSON";
        //2.params
        //let params="id=1&name=xiaomi&letter=x";
        let params={"id":3,"name":"huawei","letter":"h"};
        //3.send ajax post request
        $.ajax({
            type:"post",
            url:url,
            contentType:"application/json;charset=utf8",//client--->server 内容类型
            data:JSON.stringify(params),

            success:function(result) {
                $("#result").html(result);
            }
        });

    }


    function doAjaxPost(){
        //1.url
       let url="http://localhost:8080/doPost";
        //2.params
       let params="id=1&name=xiaomi&letter=x";//js 对象
       //controller  用@RequestBody时
        //let params={"id":"2","name":"huawei","letter":"h"};
        // $.ajax({
        //     type:"post",
        //     url:url,
        //     data:JSON.stringify(params),
        //     contentType:"application/json",
        //     success:function (result) {
        //      console.log(result);
        //     }
        // });
//3.send ajax post request
       $.post(url,params,function(result){
           console.log(result);
       })
    }


    function doAjaxGetJson(){
        //debugger
        //1.url
        let url="http://localhost:8080/doGet";
        //2.params
        let params="";
        //3.send ajax get request
        $.get(url,params,function (result) {
            console.log(result);//json格式的对象
        });
    }

    function doAjaxGet(){
        //1.url
        let url="http://localhost:8080/doGet";
        //2.params
        let params="";
        //3.send ajax get request
        $.get(url,params,function (result) {
        console.log(result);//json格式的对象
        },"json");
    }


    function doAjax() {
        debugger;
        // 1.请求url
        let url="http://localhost:8080/doAjax";
        // 2.请求参数
        let params="msg=hello jquery ajax";
        // 3.发送异步ajax请求
        //$.ajax函数为jquery中的一个ajax函数
        $.ajax({
           url:url,
           data:params,
           success:function(result){//readyState==4&&status==200
              $("#result").html(result);
           },
            error:function(xhr){//readyState==4&&status==200
                $("#result").html("result fall");
                console.log(xhr);//XmlHttpRequest
            }//服务端没有处理的异常假如抛给了客户端则会执行error部分内容
        });

    }

</script>
</body>
</html>